<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        #box{height: 140px;  overflow: hidden;}
        #ul1{height: 300px;}
        #ul2{height: 200px;}
    </style>
</head>

<body>
<div id="box">
    <ul id="ul1">
        <li>11111111111111111111116666666666666666666999999999999999999999999999999999999999</li>
        <li>2222222222222222222222</li>
        <li>3333333333333333333333</li>
        <li>4444444444444444444444</li>
        <li>5555555555555555555555</li>
        <li>6666666666666666666666</li>
        <li>7777777777777777777777</li>
        <li>8888888888888888888888</li>
        <li>9999999999999999999999</li>
        <li>8888888888888888888888</li>
        <li>9999999999999999999999</li>
        <li>8888888888888888888888</li>

    </ul>
    <ul id="ul2"></ul>
</div>
<script>
    window.onload = roll(50);

    function roll(t) {
        var ul1 = document.getElementById("ul1");
        var ul2 = document.getElementById("ul2");
        var box = document.getElementById("box");
        ul2.innerHTML = ul1.innerHTML;
        box.scrollTop = 0;
        var timer = setInterval(rollStart, t);
        box.onmouseover = function () {
            clearInterval(timer)
        }
        box.onmouseout = function () {
            timer = setInterval(rollStart, t);
        }
    }

    function rollStart() {
        if (box.scrollTop >= ul1.scrollHeight) {
            box.scrollTop = 0;
        } else {
            box.scrollTop++;
        }
    }
</script>
</body>

</html>